class Tab{
	constructor(str){
				//属性
		this.parent = document.querySelector(str);
		this.aBtn=this.parent.querySelectorAll('input');
			this.aLi=this.parent.querySelectorAll('li');
				this.btn=this.parent.querySelectorAll("input");
				this.show();
			}
			show(){
				let othis = this;
				for(let i=0;i<this.aBtn.length;i++){
					this.aBtn[i].onclick = function () {
						othis.index=i;
						othis.fn(i);
					}
				}
			}
			fn(i){
				for(var j=0;j<this.aLi.length;j++){
					this.aBtn[j].className = '';
					this.aLi[j].className = '';
				}				
				this.aLi[i].className = 'show';
				this.aBtn[i].className = 'active';
			}
		}
		class Eldest extends Tab{
			constructor(str){
				//继承属性
				super(str);
				this.autoFn();
				this.index = 0;				
			}
			autoFn(){
				var othis = this;
				clearInterval(othis);
				setInterval(function () {
					othis.index++;
					if (othis.index==othis.aBtn.length) {
						othis.index = 0;
					}
					othis.fn(othis.index);
				},2000);
			}
		}
		class Second extends Tab{
			constructor(str){
				//继承属性
				super(str);		
				this.zuo();
				this.you();
				this.num=0;
                this.sum=2;
			}
			zuo(){
	            let that=this;
	            that.btn[0].onclick=function () {
	                that.num++;
	                if(that.num==that.li.length){
	                    that.num=0;
	                }
	                that.ul.style.left=-that.num*300+"px"
	            }
	        }
	        you(){
	            let that=this;
	            that.btn[1].onclick=function () {
	                that.sum--;
	                if(that.sum<0){
	                    that.sum=2;
	                }
	                that.ul.style.left=-that.sum*300+"px"
	            }
	        }
	    }
window.onload = function () {
	new Tab("#tab-1");
	new Eldest("#tab-2");
	new Second("#tab-3");
}